<template>
  <div>
    <h2>所在学校名称：{{$store.state.schoolName}}</h2>
    <h1>学校分校数量：{{$store.state.schools.length}}</h1>

    <h2>学生列表</h2>
    <ul v-for="stu in students" :key="stu.id">
      <li>{{ stu.name }}</li>
    </ul>
    <input type="text" placeholder="输入学生名称" v-model="name">
    <button @click="addStu">添加一个学生</button>
    <button @click="addWang">添加一个学生,只允许姓王</button>
  </div>
</template>

<script>
import {nanoid} from "nanoid";
export default {
  name: "Student",
  data(){
    return{
      name:''
    }
  },

  computed:{
    students(){
      return this.$store.state.students
    }
  },
  methods:{
    addStu(){
      const stu = {id:nanoid(),name:this.name};
      this.name='';
      this.$store.commit('ADDSTU',stu);
    },
    addWang(){
      const stu = {id:nanoid(),name:this.name};
      this.name='';
      this.$store.dispatch('addWang',stu);

    }
  }
}
</script>

<style scoped>

</style>
